import React, { useState } from 'react'
import { getXqApi } from '../api/user'
import { useLoaderData } from 'react-router-dom'
import styles from '../css/Item.module.css'
import { UserOutline } from 'antd-mobile-icons'
import { List, Switch } from 'antd-mobile'
import { useSelector, useDispatch } from 'react-redux'
import { upxr } from '../store/ticket/tickte'
import { AddCircleOutline } from 'antd-mobile-icons'
import { Button, Mask, Form, Input } from 'antd-mobile'
import useAunt from '../hooks/useAunt'
function Xq() {
  let {isLogin} = useAunt()

  const ren = useSelector((state) => state.counter.ren)

  const dispatch = useDispatch()
  const [visible, setVisible] = useState(false)
  let loaderData = useLoaderData()
  let [info, setList] = useState(loaderData.info)
  const dian = () => {
    setVisible(true)
  }
  const onFinish = async (values) => {
    dispatch(upxr(values))
    console.log(values);
    setVisible(false)
  }
  const onFinishs = async (values) => {
    dispatch(upxr(values))
    console.log(values);
    // setVisible(false)
  }
  return (
    <div>
      <div className={styles.xqtop}>
        <p className={styles.info}>选择乘车人<br /><span style={{ fontSize: '16px' }}>{info.timeTaken}</span></p>
        <div className={styles.foo}>
          <div></div>
          <div>{info.trainNo}</div>
          <div></div>
          <div>{info.startTime}</div>
          <div>列车停靠站</div>
          <div>{info.endTime}</div>
          <div>{info.startStation}</div>
          <div>1h12m</div>
          <div>{info.endStation}</div>
        </div>
      </div>
      {
        ren.map((item,index)=>{
          return <div key={index}>
            <span className={styles.name}>{item.name}</span><br />
            <span className={styles.name}>{item.code}</span>
          </div>
        })
      }
      <div>
        <Form
          onFinish={onFinishs}
          initialValues={{
            contacts: [{}],
          }}
          footer={
            <Button block type='submit' color='primary' size='large'>
              提交
            </Button>
          }
          mode='card'
        >


          <Form.Array
            name='contacts'
            onAdd={operation => operation.add({ name: '张三' })}
            renderAdd={() => (
              <span>
                <AddCircleOutline /> 添加
              </span>
            )}
            renderHeader={({ index }, { remove }) => (
              <>
                <span>联系人{index + 1}</span>
                <a onClick={() => {
                  alert('确认删除')
                  remove(index)
                }} style={{ float: 'right' }}>
                  删除
                </a>
              </>
            )}
          >
            {ren =>
              ren.map(({ index }) => (
                <>
                  <Form.Item
                    name='name'
                    label='姓名'

                  >
                    <Input placeholder='请输入姓名' />
                  </Form.Item>
                  <Form.Item name='code' label='地址'>
                    <Input placeholder='请输入地址' />
                  </Form.Item>
                </>
              ))
            }
          </Form.Array>
        </Form>
      </div>
      <List header='' style={{ marginTop: '30px' }}>
        <List.Item onClick={() => dian()}><UserOutline />添加/修改乘车人</List.Item>
      </List>
      <Mask visible={visible} onMaskClick={() => setVisible(false)} >
        <Form
          onFinish={onFinish}
          layout='horizontal'
          footer={
            <Button block type='submit' style={{ backgroundColor: '#B8B8B8', color: '#fff' }} size='large'>
              提交
            </Button>
          }
        >
          <Form.Item
            name='name'
            label=''
            rules={[{ required: true, message: '姓名不能为空' }]}
          >
            <Input onChange={console.log} placeholder='请输入姓名' />
          </Form.Item>
          <Form.Item
            name='code'
            label=''
            rules={[{ required: true, message: '密码不能为空' },
            ]}
          >
            <Input onChange={console.log} placeholder='请输入密码' />
          </Form.Item>
        </Form>
      </Mask>
      <div className={styles.vvvv}>
        <Button block style={{ backgroundColor: '#3C3C3C', color: '#fff', borderRadius: '15px', width: '400px' }}>立即预定<br />邮箱出票，酒店立减券+10元x1</Button>
      </div>
    </div>
  )
}

export default Xq

export const loader = async ({ request }) => {
  let url = new URL(request.url)
  let obj = { ...Object.fromEntries(url.searchParams) }
  let { data: res } = await getXqApi({
    id: obj.id,
    start: obj.start,
    end: obj.end
  })
  console.log(res);
  return { info: res }
}